<template>
  <el-form :model="nodeForm" status-icon :rules="rules" ref="nodeFormRef" label-width="90px">
    <el-form-item label="上级节点" prop="pid">
      <el-select v-model="nodeForm.pid" placeholder="请选择上级节点">
        <el-option v-for="item in pids" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input
        v-model="nodeForm.name"
        autocomplete="off"
        placeholder="权限节点名称，【新增用户】"
      />
      <!-- <span class="el-upload__tip">权限节点名称，【新增用户】</span> -->
    </el-form-item>
    <el-form-item label="标识" prop="ename">
      <el-input
        v-model="nodeForm.ename"
        autocomplete="off"
        placeholder="权限节点程序标识，【user_add】"
      />
      <!-- <span class="el-upload__tip">权限节点程序标识，【user_add】</span> -->
    </el-form-item>
    <el-form-item label="是否菜单" prop="meun">
      <el-radio-group v-model="nodeForm.meun">
        <el-radio label="0">否</el-radio>
        <el-radio label="1">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="路由" prop="route">
      <el-input v-model="nodeForm.route" autocomplete="off" placeholder="路由地址：/sys/user" />
    </el-form-item>
    <el-form-item label="图标" prop="icon">
      <el-autocomplete
        v-model="nodeForm.icon"
        :fetch-suggestions="querySearch"
        placeholder="图标名称：el-icon-video-camera"
      >
        <template slot-scope="{ item }">
          <i :class="[item.value]"></i>
          <span>【{{ item.value }}】</span>
        </template>
      </el-autocomplete>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input
        type="textarea"
        :rows="3"
        resize="none"
        v-model="nodeForm.remark"
        autocomplete="off"
        placeholder="请输入备注信息"
      />
    </el-form-item>
    <el-form-item>
      <el-button :loading="addLoading" type="primary" @click="submitForm('nodeFormRef')"
        >新增权限节点</el-button
      >
      <el-button @click="resetForm('nodeFormRef')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { addNodeApi, getPidToNodesApi } from '@/api/nodeApi'
import nodeMixin from '../mixin'
export default {
  mixins: [nodeMixin],
  data() {
    return {
      addLoading: false,
      pids: [{ id: 0, name: '顶层节点' }],
      icons: [
        { value: 'el-icon-s-promotion' },
        { value: 'el-icon-s-home' },
        { value: 'el-icon-s-custom' },
        { value: 'el-icon-share' }
      ],
      nodeForm: {
        name: '',
        ename: '',
        icon: '',
        meun: '1',
        route: '',
        remark: '',
        pid: ''
      }
    }
  },
  mounted() {
    this.loadPids()
  },
  methods: {
    async loadPids() {
      let ret = await getPidToNodesApi()
      // this.pids = [...this.pids, ...ret.data]
      this.pids.push(...ret.data)
    },
    querySearch(queryString, cb) {
      cb(this.icons)
    },
    submitForm(formName) {
      this.addLoading = true
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let ret = await addNodeApi(this.nodeForm)
          if (ret.code === 0) {
            this.$message({
              type: 'success',
              message: '新增权限节点成功',
              showClose: true,
              duration: 3000,
              onClose: () => {
                this.resetForm(formName)
                this.addLoading = false
                this.$emit('update:dialogVisible', false)
              }
            })
          } else {
            console.log('失败')
            this.addLoading = false
          }
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped></style>
